<!--
* @author wn
* @date 2022/05/11 11:39:31
* @description: 二级路由--分类--子分类
!-->
<template>
	<div class="container">
		<!-- 模块1. 面包屑 -->
		<sub-bread />
		<!-- 模块2. 筛选区 -->
		<sub-filter @filterChange="filterChangeFn" />
		<!-- 模块3. 结果展示区 -->
		<div class="goods-list">
			<sub-sort @sortChange="sortChangeFn" />
			<!-- 商品展示列表区 -->
			<ul>
				<li v-for="good in goodsList" :Key="good.id">
					<good-item :good="good" />
				</li>
			</ul>
			<!-- 无限加载组件 放在 列表后面-->
			<xtx-infinite-loading
				:loading="loading"
				:finished="finished"
				@infinite="onLoad"
			/>
		</div>
	</div>
</template>
<script>
import SubBread from './components/SubBread'
import SubFilter from './components/SubFilter'
import SubSort from './components/SubSort'
import GoodItem from './components/GoodItem'
import { findSubCategoryGoods } from '@/network/category'
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

export default {
	name: 'SubCategory',
	components: { SubBread, SubFilter, SubSort, GoodItem },
	setup() {
		const route = useRoute()
		// 父组件 通知子组件  是否加载更多 是否加载完成
		const loading = ref(false)
		const finished = ref(false)
		// 获取的数据
		const goodsList = ref([])
		// 请求参数
		let params = {
			page: 1,
			pageSize: 20,
		}
		// 组件可见时 触发加载数据
		const onLoad = async () => {
			// 请求前 - 显示请求动画
			loading.value = true
			// 请求中
			params.categoryId = route.params.id
			const { result } = await findSubCategoryGoods(params)
			// 注意：分页加载时数组追加(不是直接赋值)
			if (result.items.length) goodsList.value.push(...result.items)
			else {
				// 判断result 是否为空 finished.value = true
				finished.value = true
			}
			// 请求完成 - 隐藏加载动画
			loading.value = false
			// 请求下一页
			params.page++
			// console.log('加载更多', result)
		}
		// 切换其他的二级分类，应该要重新发送请求
		//  清空数据  加载组件可见  自动触发 加载请求
		watch(
			() => route.params.id,
			newId => {
				if (newId && `/category/sub/${newId}` === route.path) {
					params = {
						categoryId: route.params.id,
						page: 1,
					}
					if (!finished.value) {
						loading.value = false
						// 异步操作放入 栈中  本来就是可见的  + false
						// 执行获取数据又是异步 再次入栈   后清空原数据 再执行获取数据
						goodsList.value = []
					} else {
						finished.value = false
						// 可见性 无法触发  清空之前的 手动加载
						goodsList.value = []
						onLoad()
					}
				}
			}
		)
		// 查询条件变化 emit 触发
		// 1 更改排序组件  2 更改筛选组件
		const sortChangeFn = sortParams => {
			// 保留原数据  追加 排序数据
			// 注意事项：页码还需要重置为 1
			params = { ...params, ...sortParams, page: 1 }
			if (!finished.value) {
				loading.value = false
				goodsList.value = []
			} else {
				finished.value = false
				// 可见性 无法触发  清空之前的 手动加载
				goodsList.value = []
				onLoad()
			}
		}
		// 2
		const filterChangeFn = filterParams => {
			// console.log(filterParams)
			// 保留原数据  追加 排序数据
			// 注意事项：页码还需要重置为 1
			params = { ...params, ...filterParams, page: 1 }
			if (!finished.value) {
				loading.value = false
				goodsList.value = []
			} else {
				finished.value = false
				// 可见性 无法触发  清空之前的 手动加载
				goodsList.value = []
				onLoad()
			}
		}
		return {
			loading,
			finished,
			onLoad,
			sortChangeFn,
			filterChangeFn,
			goodsList,
		}
	},
}
</script>
<style scoped lang="less">
.goods-list {
	background: #fff;
	padding: 0 25px;
	margin-top: 25px;
	ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 5px;
		li {
			margin-bottom: 20px;
		}
	}
}
</style>
